import React, { useEffect, useState } from "react";
import '../loan.css'
import '../Apply/apply.css'
import '../../Home/home.css'
import '../../../App.css'
import { useHistory } from "react-router-dom/cjs/react-router-dom";
import { Mask, DotLoading } from "antd-mobile";
import { useDispatch } from "react-redux";
import loan_reviewing from "@/assets/loan_reviewing.png"
import { isLoanLoaning, isLoanReject, isLoanRepayNow, isLoanReviewing, isLoanSigning } from "@/utils/loanStatus";
import { PageTag } from "@/utils/pageTag";
import NavigateBar from "@/components/NavigateBar";
import icon_close from "@/assets/icon_close.png"
import AddHomeEvent from "@/utils/addHomeEvent";
import StarReviewDialog from "@/components/StarReviewDialog/StarReviewDialog";
import { reqSaveEvent, reqUserState } from "@/store/actions/apiServices";

/**
 * 审核中页
 */
export default function Review() {

    //loading状态
    const [maskVisible, setMaskVisible] = useState(false)

    //显示add home弹框
    const [addHomeMaskVisible, setAddHomeMaskVisible] = useState(false);
    const [addHomeMaskIsHomeMode, setAddHomeMaskIsHomeMode] = useState(true);

    //loading状态
    const [whatsappTipsVisible, setWhatsappTipsVisible] = useState(false)

    //显示评价弹框
    const [starReviewMaskVisible, setStarReviewMaskVisible] = useState(false);

    // 获取路由历史 history 对象
    const history = useHistory()

    //获取 Redux 分发器
    const dispatch = useDispatch()

    const onReqUserStateCallback = (success, resObj, pageTag) => {
        setMaskVisible(false);
        if (success && resObj) {
            //是否为签约中
            const isHomeSigning = isLoanSigning(resObj.signFlag, resObj.signOrderId);
            //是否为审核中
            const isHomeReviewing = isLoanReviewing(resObj.applyStatus);
            //是否为拒绝
            const isHomeReject = isLoanReject(resObj.applyStatus, resObj.orderStatus);
            //是否为放款中
            const isHomeLoaning = isLoanLoaning(resObj.orderStatus);
            //是否为待还款
            const isHomeRepay = isLoanRepayNow(resObj.orderStatus);
            //是否为待进件
            const isHomeNotLoan = ((!isHomeReviewing) && (!isHomeReject) && (!isHomeLoaning) && (!isHomeRepay));
            console.log("Launch-isHomeReviewing: " + isHomeReviewing);
            console.log("Launch-isHomeReject: " + isHomeReject);
            console.log("Launch-isHomeLoaning: " + isHomeLoaning);
            console.log("Launch-isHomeRepay: " + isHomeRepay);
            console.log("Launch-isHomeNotLoan: " + isHomeNotLoan);
            console.log("Launch-isHomeSigning: " + isHomeSigning);

            if (isHomeSigning) {
                history.replace('/guide');
            } else if (isHomeReviewing) {

            } else if (isHomeReject) {
                history.replace('/reject');
            } else if (isHomeLoaning) {
                history.replace('/loaning');
            } else if (isHomeRepay) {
                history.replace('/repay');
            } else {
                history.replace('/home');
            }
        }
    };

    //点击提交
    const onHandleSubmit = () => {
        setMaskVisible(true);
        reqUserState(PageTag.REVIEW, onReqUserStateCallback);
    }

    //点击whatsapp
    const onWhatsappClick = () => {
        //whatsapp://send/?phone=+86123456789&text=Hello
        const phone = "23407050632659"
        const encodedText = encodeURIComponent("I want to get official services");
        let whatsappURL = `whatsapp://send/?phone=${phone}&text=${encodedText}`
        //跳转whatsapp
        // window.location.href = whatsappURL
        window.open(whatsappURL, "_blank")
    }

    // 点击add home监听
    const onHandleAddToHome = (type) => {
        if (type === 'home') {
            AddHomeEvent.onHandleAddHomeEventClick()
        } else {
            AddHomeEvent.onHandleAddFavoriteEventClick()
        }
    }

    // 关闭add home
    const onHandleAddToHomeClose = () => {
        setAddHomeMaskVisible(false)
    }

    //关闭 star review dialog
    const onHandleStarReviewDialogClose = () => {
        setStarReviewMaskVisible(false)
    }

    //启动监听
    useEffect(() => {
        //添加 fb 像素
        // eslint-disable-next-line no-undef
        // fbq('track', 'Page_Review');
        // eslint-disable-next-line no-undef
        // gtag('track', 'Page_Review');

        reqSaveEvent("REVIEW_START")

        //更新评价弹框状态
        // const appReviewFlag = getAppReviewFlag()
        // if (isEmptyString(appReviewFlag)) {
        //     setStarReviewMaskVisible(true)
        // }

        return () => {
            reqSaveEvent("REVIEW_END")
        }
    }, [])

    return (
        <div className="loanRoot mainBackgroundWhite">
            <NavigateBar theme="white" onAddFavorite={() => { setAddHomeMaskIsHomeMode(false); setAddHomeMaskVisible(true) }} onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }}>Onua Credit</NavigateBar>

            <div hidden className="loanContent">
                <div className="statusImageContent">
                    <img
                        className="statusImage"
                        src={loan_reviewing}
                        alt="" />
                </div>

                <span className="statusTitle">Your application is under review</span>

                <span className="statusTips">it may take a few minutes.</span>

                <div className="statusRefreshButtonContent" onClick={onHandleSubmit}>
                    <div className="mainButtonGradient">Refresh status</div>
                </div>

            </div>

            <StarReviewDialog visible={starReviewMaskVisible} onClose={onHandleStarReviewDialogClose} />

            {/* load mask https://mobile.ant.design/zh/components/mask/ */}
            <Mask visible={whatsappTipsVisible} opacity={0.1}
                onMaskClick={() => { }}>
                <div className="applyOverlayBg">
                    <div className="applyOverlayContent">
                        <div className="applyOverlayContentIconClose" onClick={() => { setWhatsappTipsVisible(false) }}>
                            <img className="applyOverlayIconClose" src={icon_close} alt="" />
                        </div>
                        <div className="applyOverlayContentHeaderTitle">Hello,</div>
                        <div className="applyOverlayContentRowTitle">Enter whats'app business account to get more services.</div>

                        <div className="homeApplyBtn" onClick={onWhatsappClick}>
                            <div className="mainButtonGradient">Let's Go</div>
                        </div>
                    </div>
                </div>
            </Mask>

            {/* <AddToHomeGifDialog visible={addHomeMaskVisible} onConfirm={onHandleAddToHome} onClose={onHandleAddToHomeClose} isHomeMode={addHomeMaskIsHomeMode} /> */}

            <Mask visible={maskVisible} opacity={0.1}
                onMaskClick={() => { }}>
                <div className="overlayContent">
                    <span style={{ fontSize: 24, color: '#ff3141' }} >
                        <DotLoading color="currentColor" />
                    </span>
                </div>
            </Mask>
        </div >
    )
}